<template>
  <div class="components-container">
    <!-- <div class="backgroundimg">
    </div> -->
    <div class="content">
      <div class="top">
        <div class="top-fi">
          <div style="padding:0 20px;width:100%;">
            <div style="line-height:60px;fontSize:30px;">收入汇总</div>
            <div style="line-height:50px;fontSize:25px;">总收入</div>
            <div style="line-height:60px;fontSize:60px;text-align:center;">1234.56 <span style="fontSize:20px;">元</span></div>
            <div style="line-height:30px;fontSize:25px;">其中:</div>
            <div style="line-height:30px;fontSize:25px;text-align:center;">减免34.56元</div>
            <div style="line-height:30px;fontSize:25px;text-align:center;">实收1200.00元</div>
          </div>
        </div>
        <div class="top-se">
          <div style="width:40%">
            <div style="line-height:30px;fontSize:30px;margin:20px 0 70px 20px">
              火化人员统计
            </div>
            <div style="fontSize:60px;text-align:center;">
              共123具
            </div>
          </div>
          <div id="map">

          </div>
        </div>
      </div>
      <div class="main">
        <div class="main-fi">
            <div>
                <div>火化炉统计</div>
                <div>55<span>次</span></div>
            </div>
        </div>
        <div class="main-se">
            <div>
                <div>车辆统计</div>
                <div>11<span>次</span></div>
            </div>
        </div>
        <div class="main-th">
            <div>
                <div>悼念厅统计</div>
                <div>33<span>次</span></div>
            </div>
        </div>
        <div class="main-fo">
            <div>
                <div>守灵室统计</div>
                <div>11<span>次</span></div>
            </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-fi">
            <div style="width:50%;padding:20px 0 0 20px;">
                <div style="fontSize:30px;">骨灰寄存统计</div>
                <div style="display:flex;justify-content:space-around;margin:60px auto;width:80%;text-align:center;fontSize:30px;">
                    <div>
                        <div>寄存中</div>
                        <div>123</div>
                    </div>
                    <div>
                        <div>已取出</div>
                        <div>456</div>
                    </div>
                    <div>
                        <div>待寄存</div>
                        <div>789</div>
                    </div>
                </div>
            </div>
          <div id="line">
          </div>
        </div>
        <div class="footer-se">
          <div style="width:100%;height:100%;padding:20px;">
            <div style="fontSize:25px;line-height:60px;">冰柜调度统计</div>
            <div style="fontSize:20px;">使用次数24次</div>
            <div id="circle" style="color:#fff;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/common.scss";

  .backgroundimg {
    height: 85vh;
    background-image: url("../../../static/imgs/每日概况.png");
    background-position: center;
    background-size: 100% 100%;
  }

  .content {
    width: 100%;
    height: 85vh;
    display: flex;
    flex-direction: column;
    color: #fff;
  }

  .top,
  .main,
  .footer {
    width: 100%;
    display: flex;
    padding-bottom: 20px;
  }

  .main>div>div{
      width:100%;
      padding:20px 0 0 20px;
  }
  .main>div>div>div:nth-child(1){
      font-size: 25px;
      margin-bottom: 20px;
  }
  .main>div>div>div:nth-child(2){
      font-size: 65px;
      text-align: center;
  }
  .main span{
      font-size: 25px;
      margin-left: 20px;
  }

  .main>div>div{

  }

  .top>div,
  .main>div,
  .footer>div {
    border-radius: 10px;
    background-size: 100% 100%;
    display: flex;
    overflow: hidden;
  }

  .top {
    flex: 7;
  }

  .main {
    flex: 4;
    display: flex;
    justify-content: space-between;
  }

  .footer {
    flex: 7;
    padding-bottom: 0;
  }

  .top-fi {
    height: 100%;
    width: calc(25% - 18px);
    margin-right: 18px;
    background-image: url('../../../static/imgs/top-fi.png')
  }

  .top-se {
    height: 100%;
    width: 75%;
    background-image: url('../../../static/imgs/top-se.png')
  }

  .main-fi {
    height: 100%;
    width: 25%;
    margin-right: 18px;
    background-image: url('../../../static/imgs/main-fi.png')
  }

  .main-se {
    height: 100%;
    width: 25%;
    margin-right: 18px;
    background-image: url('../../../static/imgs/main-se.png')
  }

  .main-th {
    height: 100%;
    width: 25%;
    margin-right: 18px;
    background-image: url('../../../static/imgs/main-th.png')
  }

  .main-fo {
    height: 100%;
    width: 25%;
    background-image: url('../../../static/imgs/main-fo.png')
  }

  .footer-fi {
    height: 100%;
    width: 75%;
    margin-right: 18px;
    background-image: url('../../../static/imgs/footer-fi.png')
  }

  .footer-se {
    height: 100%;
    width: calc(25% - 18px);
    background-image: url('../../../static/imgs/footer-se.png')
  }

  #map {
    width: 60%;
    height: 100%;
  }

  #line {
    width: 50%;
    height: 100%;
  }

  #circle {
    width: 100%;
    height: 80%;
  }

</style>
<script>
  import dataTable from "@/components/Table/DataTable";
  import apiBase from "@/api/apiBase.js";
  import {
    formatDate
  } from "@/utils/date.js";
  import {
    manage
  } from "@/mixins/managePage.js";
  import {
    PRINT
  } from "@/components/Pdf/PDF.js";
  var echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  export default {
    name: "unitManage",
    mixins: [manage],
    data() {
      return {};
    },
    methods: {

      pie() {
        var myChart = echarts.init(document.getElementById('map'));
        myChart.title = '环形图';

        var option = {
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x: 'center',
            show: false
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            top: 100,
            textStyle:{
                color:'#fff'
            },
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '直接访问'
              },
              {
                value: 310,
                name: '邮件营销'
              },
              {
                value: 234,
                name: '联盟广告'
              },
              {
                value: 135,
                name: '视频广告'
              },
              {
                value: 1548,
                name: '搜索引擎'
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: ['#a4fbff', '#00ffc0', '#b9f4a2', '#f46746', '#f3c54a', '#f8ec69', '#ff8814', '#fff714',
              '#c5ff14', '#14ff1a', '#509eff'
            ]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      line() {
        var myChart = echarts.init(document.getElementById('line'));

        var option = {
          xAxis: {
            type: 'category',
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330],
            type: 'line',
            // smooth: true
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      circle() {
        var myChart = echarts.init(document.getElementById('circle'));
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            textStyle: {
                color: '#fff',
            },
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],

          },

          series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['65%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold',
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
                value: 335,
                name: '直接访问'
              },
              {
                value: 310,
                name: '邮件营销'
              },
              {
                value: 234,
                name: '联盟广告'
              },
              {
                value: 135,
                name: '视频广告'
              },
              {
                value: 1548,
                name: '搜索引擎'
              }
            ]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },



    },
    mounted() {
      this.pie()
      this.line()
      this.circle()
    },
    components: {
      dataTable,
    },

    created() {


    }
  };

</script>
